<template>
    <z-paging ref="paging" v-model="blindBoxData" @query="queryList" :refresher-enabled="false">
        <view class="bg_box">
            <view class="header_box">
                <view class="biaoti_box">
                    <view class="left_icon_box" @click="back">
                        <image src="https://www.dingxians.cn/upload/20250324/67e13c80ecef6.png" mode="scaleToFill" />
                    </view>
                    <view class="center_biaoti_box">

                    </view>
                    <view class="left_icon_box">
                        <!-- 占位 -->
                    </view>
                </view>
            </view>
        </view>
        <view class="box">
            <view  @click="header('/pages/practice/detail?mhId=' + item.id + '&catId=' + item.cat_id + '&boxs=' + item.boxs)" class="box_item" v-for="item in blindBoxData" :key="item.id" :style="{
                backgroundImage: `url(https://www.dingxians.cn/static/newsta/index/4.png)`,
            }">
                <image mode="" :src="item.image" class="box_image"></image>
                <view class="box_right">
                    <view class="box_right_content">
                        <view class="box-msg">
                            <view class="box-name">{{ item.name }}({{ item.cy_total }}/{{ item.original_num }})</view>
                        </view>
                    </view>
                    <view class="buy-btn" :style="{
                            backgroundImage: `url(https://www.dingxians.cn/upload/20250401/67eba458d820f.png)`,
                        }">
                        ￥{{ item.price }}
                        </view>
                    <view class="box_level"  :style="{
                        backgroundImage: `url(https://www.dingxians.cn/static/newsta/index/sm/4.png)`,
                    }">
                        <image :src="prize.avatar" class="box_level_item"
                            v-for="(prize, prize_index) in item.cy_data" :key="prize_index"></image>
                    </view>
                </view>
            </view>
        </view>


    </z-paging>
</template>
<script>
import api from '../../api/index.js'
export default {
    components: {
    },
    data() {
        return {
            blindBoxData: []
        }
    },

    onLoad(e) {
    },
    onShow() {
    },
    methods: {

        // 获取发车列表
        queryList(pageNo, pageSize) {
            let data = {
                tag: 1,
                page: pageNo,
                limit: pageSize
            }

            api.index
                .challengeBox(data)
                .then((res) => {
                    res.data.data.data.forEach(item => {
                        item.cy_data.forEach(val => {
                            val.src = val.avatar
                            while (item.cy_data.length < item.original_num) {//如果真实数据长度小于总长度时，开始循环直到后边空元素补齐长度为止
                                item.cy_data.push({
                                    src: 'https://www.dingxians.cn/static/newsta/index/sm/4.png'
                                });
                            }
                        })
                    });
                    this.$refs.paging.complete(res.data.data.data)
                })

        },
        back() {
            uni.navigateBack()
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep.zp-scroll-view-absolute {
    background-image: none !important;
    background-color: #000 !important;
}

.bg_box {
    width: 100%;
    height: 700rpx;
    background-image: url('https://www.dingxians.cn/upload/20250401/67eba7851d71c.jpg');
    background-size: 100% 100%;


    .header_box {
        width: 750rpx;
        height: 180rpx;
        box-sizing: border-box;
        padding-top: 92rpx;

        .biaoti_box {
            width: 100%;
            height: 88rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20rpx;

            .left_icon_box {
                width: 80rpx;
                height: 80rpx;

                image {
                    width: 100%;
                    height: 100%;
                }
            }

            .center_biaoti_box {
                width: 380rpx;
                height: 88rpx;
                line-height: 88rpx;
                text-align: center;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 40rpx;
                color: #fff;
                font-weight: 900;
            }
        }
    }
}


.box {
    display: flex;
    /*margin: 10px 30rpx 0;*/
    width: 710rpx;
    margin: 10rpx auto;
    flex-direction: column;
    position: relative;
    .buy-btn {
                width: 164rpx;
                height: 64rpx;
                background-size: 100% 100%;
                font-size: 30rpx;
                text-align: center;
                line-height: 64rpx;
                color: #ded000;
                position: absolute;
                bottom: 28rpx;
                right: 22rpx;
            }
    .box_item {
        // background-color: #fff;
        width: 710rpx;
        height: 292rpx;
        //background: url('https://www.dingxians.cn/upload/user_static/index/bg-box-normal.png') no-repeat;
        //animation: anim-box-normal 1.5s steps(48) infinite forwards;
        background-size: 100% 100%; // 14016PX
        margin-bottom: 20rpx;
        display: flex;
        // align-items: center;
        position: relative;

        .box_right_content {
            display: flex;
            justify-content: space-between;
            margin-bottom: 38rpx;
            box-sizing: border-box;
            padding-top: 45rpx;

            .box-msg {
                flex: 1;
                font-size: 34rpx;
                color: #ded000;
                font-weight: 900;

                .box-name {
                    color: white;
                    margin-bottom: 10rpx;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;
                }

                .yuan {
                    font-size: 24rpx;
                }
            }

           
        }

        /* .box_item_bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 250rpx;
				z-index: -1;
			} */

        // background: linear-gradient(45deg, #d6c8fa, #f7f7f7);
        .box_image {
            width: 200rpx;
            height: 200rpx;
            margin: 50rpx 20rpx 74rpx 40rpx;
            animation: anim 2s infinite alternate;
        }

        .box_right {
            /* display: flex; */
            flex: 1;
            color: white;
            /* flex-direction: column;
				justify-content: space-around;
				height: 250rpx; */

            .box_right_top {
                font-size: 36rpx;
                font-weight: bold;
            }

            .box_price_box {
                display: flex;
                color: #ff5d5d;
                font-weight: bold;
                position: relative;
                height: 70rpx;
                align-items: center;

                .box_price_box_bg {
                    position: absolute;
                    left: 0;
                    top: 0;
                    height: 70rpx;
                    z-index: -1;
                }

                .box_price_left {
                    display: flex;
                    align-items: baseline;
                    margin-left: 20rpx;

                    .box_price_icon {
                        font-size: 24rpx;
                    }

                    .box_price {
                        font-size: 40rpx;
                    }
                }
            }

            .box_level {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 90%;

                .box_level_item {
                    // flex-direction: column;
                    display: flex;
                    align-items: center;
                    height: 86rpx;
                    width: 86rpx;
                    /*background: #141414;*/
                    /*box-shadow: 0px 0px 6px 1px rgba(237, 222, 0, 0.4);*/
                    border-radius: 0px 0px 0px 0px;
                    // background-image: url('https://www.dingxians.cn/upload/user_static/box/bg-goods-image-normal.png');
                    background-size: 100% 100%;
                    opacity: 1;
                    /* border: 1px solid #665f00;*/
                    // .box_level_name {
                    // 	font-size: 24rpx;
                    // 	font-weight: bold;
                    // 	padding: 5rpx 10rpx;
                    // 	border-radius: 5rpx;
                    // }
                    // .box_level_pro {
                    // 	font-size: 24rpx;
                    // 	margin-top: 10rpx;
                    // }
                }
            }
        }
    }
}
</style>